<template>
  <div class="box">
    <!-- logo区域 -->
    <div class="left">
      <img src="../../assets/logo.png" alt="" />
    </div>
    <!-- 右边区域 -->
    <div class="right">
      <!-- 搜素框区域 -->
      <div class="top">
        <div class="sou">
          <van-search
            v-model="value"
            shape="round"
            background="#5c81c8"
            placeholder="搜素"
            @search="searchChange"
          />
        </div>
        <div class="cen" @click="zhao()">招 聘</div>
      </div>
      <!-- 新闻区域 -->
      <div class="bottom">
        <div
          :class="['small', curr == index ? 'active' : '']"
          v-for="(item, index) in list"
          :key="index"
          @click="jump(index)"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { indexSearch } from "@/api/index";
export default {
  props: {
    subscript: {
      type: [String, Number],
      default: 99,
    },
  },
  data() {
    return {
      value: "",
      curr: 99,
      list: [
        { text: "新 闻" },
        { text: "访 谈" },
        { text: "讲 座" },
        { text: "客 服" },
      ],
    };
  },
  mounted() {
    this.curr = this.subscript;
  },
  methods: {
    //招聘
    zhao() {
      this.$router.push("/recruitTwo");
    },
    //新闻事件
    jump(i) {
      // this.curr = 99

      if (i == 0) {
        this.$router.push("/newstwo");
      } else if (i == 1) {
        this.$router.push("/intertwo/interthree");
      } else if (i == 2) {
        this.$router.push("/lecturetwo/lecturethree");
      } else if (i == 3) {
        this.$router.push("/welfaretwo/welfarethree");
      }
    },
    // 搜索
    searchChange(val) {
      indexSearch({
        chamberName: val,
      }).then((res) => {
        this.$toast({
          message: "搜索成功，即将跳转小程序",
          icon: "success",
        });
        setTimeout(() => {
          this.$router.push("/applet");
        }, 1000);
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: .8rem;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #5c81c8;
}
/* logo区域 */
.left {
  width: 23%;
  height: 90%;
  margin-top: .05rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left img {
  width: 0.55rem;
}
/* 右边区域 */
.right {
  width: 75%;
  height: 100%;

}
/* 搜素框区域 */
.top {
  width: 100%;
  height: 50%;
  display: flex;
  margin-top: 0.03rem;
}
.top .sou {
  width: 83%;
  height: 100%;
}
.van-search {
  height: 0.45rem;
}
.top .cen {
  width: 19%;
  height: 100%;
  color: white;
  line-height: 0.5rem;
  font-size: 0.22rem;
  margin-right: 0.09rem;
}
/* 新闻区域 */
.bottom {
  width: 100%;
  height: 50%;
  display: flex;
}
/* 小盒子区域 */
.small {
  width: 25%;
  height: 0.5rem;
  text-align: center;
  line-height: 0.42rem;
  flex-shrink: 0;
  color: white;
  font-size: 0.22rem;
}
.small.active {
  /* color: #66e6f7 !important; */
  color: #f7ba2a;
}
.van-cell{
  line-height: .19rem;
}
</style>